<template>
	<view class="container u-skeleton">
		<view class="tui-header-box " :style="{ height: height + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="tui-header" :style="{ paddingTop: top + 'px', opacity: opcity }">{{scenicInfo?scenicInfo.scenic_name:'景点详情'}}</view>
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="back">
					<view class="iconfont iconfanhuijiantou back" :style="opcity >= 1 ? 'color:#000' : 'color:#fff'" ></view>
				</view>
			</view>
		</view>
		<view class="carousel " style="background-color: #9d9d9d;">
			<swiper  circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in scenicInfo.slider_image" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="u-skeleton " style="margin: 0 6px;border-radius: 8px;">
			<view class="introduce-block display-flex-column " style="">
				<view v-if="scenicInfo.notice" class="row-center notice " style="" @click="noticeShow=true">
					<text class="iconfont icongantanhaozhong" style="margin-bottom: 1px; margin-left: 15px;margin-right: 3px;color: #f95e53;font-size: 18px;"></text>
					<text style="color: #fd818d;">景区须知</text>
					<text class="iconfont iconxiayiyeqianjinchakangengduo " style="color: ##f95e53; margin-left: auto;margin-right: 10px;"></text>
				</view>
				<view class="row-center u-skeleton-rect" style="height: 40px;margin: 0 15px;">
					<text style="font-size: 18px;font-weight: 600;">{{scenicInfo.scenic_name}}</text>
					<view class="grade" v-if="scenicInfo.grade"><text>{{scenicInfo.grade}}A</text></view>
				</view>
				<view class="row-center display-flex u-skeleton-rect" style="height: 30px;margin: 7px 15px;" @click="goIntro(scenicInfo.id)">
					<text class="" v-if="scenicInfo.status==1" style="color: #23beae;margin-right: 16px;">营业中</text>
					<text class="" v-else  style="color: #F44336;margin-right: 16px;">已闭园</text>
					<view class="text-ellipsis" style="width: 160px;">
						{{scenicInfo.open_time?scenicInfo.open_time[0].time:'未知'}}
					</view>
					<view class="" style="color: #919191; margin-left: auto;">
						简介须知
						<text class="iconfont iconxiayiyeqianjinchakangengduo" ></text>
					</view>	
				</view>
				<view class="line" style="margin: 0 12px;"></view>
				<view class="row-center " style="height: 30x;margin: 7px 15px;">
					<view class="u-skeleton-rect text-ellipsis" style="margin-top: 10px;color: #000;width: 220px;height: 25px;">{{scenicInfo.scenic_address_name}}</view>
					<view @click="goScenicArea(scenicInfo.scenic_address_lat_and_lng,scenicInfo.scenic_address_name)" class="display-flex-column u-skeleton-rect" style="margin-left: auto;margin-right: 10px;lign-items: center;">
						<text class="iconfont iconzhinanzhidao " style="color: #2c63ff;text-align: center;"></text>
						<view class="" style="color: #007AFF;font-size: 14px;">
							<text>地图</text>
							<text>·周边</text>
						</view>
					</view>
			
				</view>
			</view>
			
		</view>
		<view v-if="productList.length" v-for="(item,index) in productList" :key="index" class="ticket-block display-flex-column" style="">
			<view class="row-center u-skeleton-rect" style="height: 40px;">
				<text style="font-size: 18px;font-weight: 600;margin-left: 12px;">{{item.store_name}}</text>
			</view>
			<view class="line" style="margin: 5px 12px;"></view>
			<view v-for="(item2,index2) in item.product_value_first" :key="index2" style="background-color: #f8fafd;margin-bottom: 10px;margin: 0 10px;">
				<view class="display-flex-column">
					<view class="" style="width: 60%;margin: 5px 12px;color: #000;font-weight: 600;">
						{{item2.attr_name}}
					</view>

				</view>
				<view class="row" style="margin-left: 12px;margin-bottom: 10px;">
					<view class="column">
						<view v-if="item.booking_explain&&item.booking_explain.length" class="row-center" style="margin: 2px 0;">
							<view class="row-center" v-if="index<=2"  v-for="(item3,index) in item.booking_explain" :key="index">
								<view :style="index==0?'color: #fd8457':'color:#666'">
									{{item3.title}}
								</view>
								<view v-if="index!=(item.booking_explain.length-1)&&index<=1" class="shu-line4"></view>
							</view>
							
						</view>
						<view style="margin: 2px 0 5px 0;" @click="goNotice(item)">
							<text style="color: #a9aaa6;margin-right: 8px;">已售{{item2.sales}}+</text>
							<text style="color: #007AFF">购买须知</text>
							<text class="iconfont iconxiayiyeqianjinchakangengduo " style="color: #a9aaa6"></text>
						</view>
					</view>
					<view @click="attrShow(index,item2.attr_name,item2.price)" class="column" style="margin-left: auto;margin-right: 12px;align-items: flex-end;">
						<view style="color: #fd5f33;"><text>￥</text><text style="font-size: 22px;">{{item2.price}}</text></view>
						<view style="height: 25px;line-height: 25px; width: 60px; background-image: linear-gradient(to right,#fd860c, #fd5f33);;border-radius: 4px 4px 4px 4px;color: #FFFFFF;text-align: center;"><text>预定</text></view>
					</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="item-title" style="margin:15px;">
			<text class="u-skeleton-rect" >热门推荐</text>
			
		</view>
		<view class="" style="margin-bottom: 25px;">
			<u-waterfall v-model="hostProduct" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goProductDetail(item)">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-10" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.store_name}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<!-- <view class="demo-shop">
							已售{{item.sales}}
						</view> -->
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goProductDetail(item)">
						<u-lazy-load threshold="-10" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.store_name}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<!-- <view class="demo-shop">
							已售{{item.sales}}
						</view> -->
					</view>
				</template>
			</u-waterfall>
		</view>
		<u-popup mode="center" v-model="noticeShow" :safe-area-inset-bottom="true" border-radius="20" height="700" width="78%">
			<view class="content" style="background: #f7f7f7;height: 100%;">
				<rich-text :nodes="scenicInfo.notice"></rich-text>
			</view>
		</u-popup>
		<u-popup v-model="buyNoticeShow" mode="bottom" border-radius="14" height="1000"  z-index='10'>
			<view style="margin-top: 10px;margin-left: 10px;margin-right: 10px;">
				<view class="textpic acea-row row-between-wrapper">
					<view class="text">
						<view class="line1" style="font-weight: 600;font-size: 18px;color: #333333;">
							{{productItemNotice.store_name}}
						</view>
					</view>
					<view class="iconfont iconshibai" @click="closeNotice" style="font-size: 26px;"></view>
				</view>
				<view class="line" style="margin: 10px 0;"></view>
				<view v-if="productItemNotice.booking_explain" class="mp-ticketcontent-item">
					<view class="mp-ticketcontent-title">
						预定说明
					</view>
					<view class="m_desc_item " v-for="(item,index) in productItemNotice.booking_explain" :key="index">
						<view class="m_desc_item_name ">
							<view class="m_title_border">
								{{item.title}}
							</view>
						</view>
						<view class="m_desc_item_content">
							{{item.desc}}
						</view>
					</view>
				</view>
				<view  v-if="productItemNotice.use_explain" class="mp-ticketcontent-item">
					<view class="mp-ticketcontent-title">
						使用说明
					</view>
					<view class="m_desc_item " v-for="(item,index) in productItemNotice.use_explain" :key="index">
						<view class="m_desc_item_name ">
								{{item.title}}
						</view>
						<view class="m_desc_item_content">
							{{item.desc}}
						</view>
					</view>
				</view>
				<view  v-if="productItemNotice.fee_explain" class="mp-ticketcontent-item">
					<view class="mp-ticketcontent-title">
						费用说明
					</view>
					<view class="m_desc_item " v-for="(item,index) in productItemNotice.fee_explain" :key="index">
						<view class="m_desc_item_name ">
								{{item.title}}
						</view>
						<view class="m_desc_item_content">
							{{item.desc}}
						</view>
					</view>
				</view>
				<view  v-if="productItemNotice.other_explain" class="mp-ticketcontent-item">
					<view class="mp-ticketcontent-title">
						其他说明
					</view>
					<view class="m_desc_item " v-for="(item,index) in productItemNotice.other_explain" :key="index">
						<view class="m_desc_item_name ">
								{{item.title}}
						</view>
						<view class="m_desc_item_content">
							{{item.desc}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<newProductWindow :attr="attr" :isShow="1" :iSplus="1" :isDate="isDate" :salesDates="salesDates" :info="info" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
				@ChangeSelectDay="ChangeSelectDay"	@ChangeCartNum="ChangeCartNum" @selectAttr="selectAttr" @attrVal="attrVal" @selectedDaysVal="selectedDaysVal" @iptCartNum="iptCartNum" id="product-window"
					></newProductWindow>
		<u-skeleton :loading="skeleton" :animation="true" bgColor="#FFFFFF"></u-skeleton>
		
	</view>
</template>

<script>
	import tuiNavigationBar from '@/components/nav-bar/index'
	import {getScenicDetail,getScenicProduct} from '@/api/scenic'
	import newProductWindow from '@/components/newProductWindow';
	import {postCartAdd,getProductHot} from '@/api/store'
	export default {
		components: {
			tuiNavigationBar,
			newProductWindow
		},
		data() {
			return {
				isDate:1,
				hostProduct: [],
				buyNoticeShow:false,
				skeleton:true,
				height: 64, //header高度
				top: 26, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				noticeShow: false,
				noticeStr: '',
				ticketInfo: {},
				scenicInfo: {},
				productList:[],
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				isOpen: false, //是否打开属性组件
				attrTxt: '请选择', //属性页面提示
				attrValue: '', //已选属性
				productValue: [], //系统属性
				storeInfo:{}, // 选择的产品
				cart_num: 1, //购买数量
				productItemNotice:{},
				salesDates:[],
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				selectDate: ''
			};
		},
		onLoad(options) {
			this.getDetail(options.id)
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
						console.log(this.height)
					}
				});
			}, 0);
			
		},
		onReady() {
			this.init()
			this.get_host_product()

		},
		methods: {
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				if(that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.length<that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data)
				});
			},
			back: function() {
				uni.navigateBack();
			},
			getDetail(id){
				getScenicDetail({id:id}).then(res => {
					this.scenicInfo = res.data.data,
					this.getProductList(this.scenicInfo.id)
				})
			},
			getProductList(id){
				getScenicProduct({id:id}).then(res => {
					this.skeleton = false
					this.productList = res.data.data
				})
			},
			goIntro(id){
				uni.navigateTo({
					url:"/pages/scenic/scenic_intro?id="+id
				})
			},
			attrShow(index,attr_name,price){
				let that = this,dates =[];
				that.$set(that, 'salesDates',[]);
				this.$set(this.attr, 'productAttr',this.productList[index].product_attr);
				that.$set(that, 'productValue', this.productList[index].product_value);
				that.$set(that, 'storeInfo', this.productList[index]);
				dates = this.productList[index].sales_dates
				that.info.selected = [];	
				dates.forEach((res,index) =>{
					// if(index==0) res.selected = true
					res.price = price,
					that.info.selected.push({
						date: res.date_str,
						info: '￥' + parseFloat(res.price),
						surplus: 0
					})
				})
				that.$set(that, 'salesDates',dates);
				that.DefaultSelect(attr_name)
				//打开属性
				if (that.attrValue) {
					//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
					that.attr.cartAttr = !that.isOpen ? true : false;
				} else {
					if (that.isOpen) that.attr.cartAttr = true;
					else that.attr.cartAttr = !that.attr.cartAttr;
				}
			},
		    /**
			 * 默认选中属性
			 *
			 */
			DefaultSelect: function(attr_name) {
				let productAttr = this.attr.productAttr;
				let value = [attr_name];
	
				for (let i = 0; i < productAttr.length; i++) {
					if(productAttr[i].attr_values.indexOf(attr_name)>-1)
					{
						this.$set(productAttr[i], 'index', attr_name);
						continue
					}else{
						value.push(productAttr[i].attr_values[0])
						this.$set(productAttr[i], 'index', value[i]);
					}
					
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.join(',')];
				if (productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', productSelect.image);
					this.$set(this.attr.productSelect, 'price', productSelect.price);
					this.$set(this.attr.productSelect, 'stock', productSelect.stock);
					this.$set(this.attr.productSelect, 'unique', productSelect.unique);
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this, 'attrValue', value.join(','));
					this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
					this.$set(this, 'attrTxt', '已选择');
				} else if (!productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', 0);
					this.$set(this.attr.productSelect, 'unique', '');
					this.$set(this.attr.productSelect, 'cart_num', 0);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				} else if (!productSelect && !productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock);
					this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '');
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				}
			},
			attrVal(val) {
				this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
					.indexn]);
			},
			
			selectAttr(){
				let that  = this, news = 1;
				console.log('跳转购买')
				let q = {
					productId: that.storeInfo.id,
					cartNum: that.attr.productSelect.cart_num,
					new: news === undefined ? 0 : 1,
					uniqueId: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : '',
					date: that.selectDate
				};
				postCartAdd(q)
					.then(function(res) {
						that.isOpen = false;
						that.attr.cartAttr = false;
						if (news) {
							uni.navigateTo({
								url: '/pages/users/order_confirm/index?is_address=0&new=1&cartId=' + res.data.cartId
							});
						} else {
							that.$util.Tips({
								title: '添加成功',
								success: () => {
									that.getCartCount(true);
								}
							});
						}
					})
					.catch(err => {
						that.isOpen = false;
						return that.$util.Tips({
							title: err
						});
					});
			},
		     /**
			 * 属性变动赋值
			 *
			 */
			ChangeAttr: function(res) {
				let productSelect = this.productValue[res];
				if (productSelect && productSelect.stock > 0) {
					this.$set(this.attr.productSelect, 'image', productSelect.image);
					this.$set(this.attr.productSelect, 'price', productSelect.price);
					this.$set(this.attr.productSelect, 'stock', productSelect.stock);
					this.$set(this.attr.productSelect, 'unique', productSelect.unique);
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
					this.$set(this, 'attrValue', res);
					this.$set(this, 'attrTxt', '已选择');
				} else {
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', 0);
					this.$set(this.attr.productSelect, 'unique', '');
					this.$set(this.attr.productSelect, 'cart_num', 0);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				}
			},
			/**
			 * 购物车数量加和数量减
			 *
			 */
			ChangeCartNum: function(changeValue) {
				//changeValue:是否 加|减
				//获取当前变动属性
				let productSelect = this.productValue[this.attrValue];
				//如果没有属性,赋值给商品默认库存
				if (productSelect === undefined && !this.attr.productAttr.length) productSelect = this.attr
					.productSelect;
				//无属性值即库存为0；不存在加减；
				if (productSelect === undefined) return;
				let stock = productSelect.stock || 0;
				let num = this.attr.productSelect;
				if (changeValue) {
					num.cart_num++;
					if (num.cart_num > stock) {
						this.$set(this.attr.productSelect, 'cart_num', stock ? stock : 1);
						this.$set(this, 'cart_num', stock ? stock : 1);
					}
				} else {
					num.cart_num--;
					if (num.cart_num < 1) {
						this.$set(this.attr.productSelect, 'cart_num', 1);
						this.$set(this, 'cart_num', 1);
					}
				}
			},		
		
		    ChangeSelectDay:function(date){
				this.$set(this, 'selectDate', date);
			},
		
			onMyEvent: function() {
				this.$set(this.attr, 'cartAttr', false);
				this.$set(this, 'isOpen', false);
			},
			selectedDaysVal(data) {
				this.$set(this, 'salesDates', data);
			},
			/**
			 * 购物车手动填写
			 *
			 */
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, 'cart_num', e);
			},
			init: function() {
				let that = this
			},
			goNotice:function(item){
				console.log(232323,item)
				this.productItemNotice = item
				this.buyNoticeShow = true
			},
			closeNotice:function(){
				this.buyNoticeShow = false
			},
			goOrderWrite: function(id) {
				uni.navigateTo({
					url: '/pages/scenic/order_write?product_id='+this.productId+'&item_id='+id
				})
			},
			goProductDetail(item){
				uni.navigateTo({
					url:"/pages/product/product_detail?id="+item.id
				})
			},
			goScenicArea: function(res,name) {
	
				uni.openLocation({
					//​使用微信内置地图查看位置。
					latitude:  parseFloat(res.split(",")[1]),
					longitude: parseFloat(res.split(",")[0]),
					name: name,
				});
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}

	}
</script>

<style lang='scss'>
page{
	background-color: #F8F8F8;
}
	.carousel {
		height: 400upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 400upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.introduce-block {
		border-radius: 8px;
		position: relative;
		margin-top: -15px;
		background-color: #FFFFFF;
	}

	.notice {
		height: 40px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: #fef3f2;
	}

	.grade {
		border-radius: 2px;
		color: #fff;
		font-weight: 700;
		background: linear-gradient(-90deg,#cf7632,#f8b891);
		width: 20px;
		line-height: 15px;
		height: 15px;
		text-align: center;
		font-size: 10px;
		margin-left: 4px;
		padding: 0 2px;
		align-items: center;
		justify-content: center;
	}

	.ticket-block {
		margin-left: 6px;
		margin-right: 6px;
		border-radius: 8px;
		margin-top: 10px;
		background-color: #FFFFFF;
	}

	.content {
		padding: 24rpx;
	}
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
	
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}
	
	.tui-icon-ml {
		margin-left: 20rpx;
	}
	
	.tui-icon-box {
		position: relative;
		height: 32px !important;
		width:32px !important;
		padding: 6px !important;
	
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.back {
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		margin-left: 10px;
		margin-bottom: 5px;
	}
	.mp-ticketcontent-title{
		font-size: 17px;
		color: #333;
		letter-spacing: -.4px;
		font-weight: 700;
		 margin-bottom: 14px;
	}
	.m_desc_item {
		padding-bottom: 14px;
		display: flex;
		flex-direction: row;
	}
	.m_desc_item_content{
		flex: 1;
	}
	.m_title_border {
		width: 69px;
		border: .5px solid #ffc899;
		border-radius: 2px;
		text-align: center;
		height: 21px;
		color: #f70;
		font-size: 13px;
		font-weight: 700;
	}
	.m_desc_item_name {
	    width: 25%;
	}
	
	.item-title {
		font-size: 28upx;
		font-weight: bold;
		padding: 10upx 0 0 0;
	
	}
	.demo-warter {
			border-radius: 8px;
			margin: 5px;
			background-color: #ffffff;
			padding: 8px;
			position: relative;
		}
		
		.u-close {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}
		
		.demo-image {
			width: 100%;
			border-radius: 4px;
		}
		
		.demo-title {
			font-size: 30rpx;
			margin-top: 5px;
			color: $u-main-color;
		}
		
		.demo-tag {
			display: flex;
			margin-top: 5px;
		}
		
		.demo-tag-owner {
			background-color: $u-type-error;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 4rpx 14rpx;
			border-radius: 50rpx;
			font-size: 20rpx;
			line-height: 1;
		}
		
		.demo-tag-text {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			margin-left: 10px;
			border-radius: 50rpx;
			line-height: 1;
			padding: 4rpx 14rpx;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			font-size: 20rpx;
		}
		
		.demo-price {
			font-size: 30rpx;
			color: #FF6600;
			margin-top: 5px;
		}
		
		.demo-shop {
			font-size: 22rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}
</style>
